<template>
  <div class='sub-category'>
    <div class="container">
        <!-- 面包屑模块 -->
        <SubBread/>
        <!-- 筛选模块 -->
        <SubFilter/>
        <!-- 排序模块 -->
        <SubSort/>
        <!-- 内容模块 -->
        <SubList/>
    </div>
  </div>
</template>

<script>
import SubBread from './components/sub-bread'
import SubFilter from './components/sub-filter'
import SubSort from './components/sub-sort'
import SubList from './components/sub-list'
import { provide, reactive } from 'vue'
export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubFilter,
    SubSort,
    SubList
  },
  setup () {
    // 附加查询参数
    const filterData = reactive({
      page: 1, // 重置为1
      attrs: [], // 一般商品属性
      sortField: null, // 排序
      brandId: null // 品牌ID
    })
    provide('filterData', filterData)
    // 提供修改排序id
    function setSortField (newSortField) {
      filterData.sortField = newSortField
    }
    provide('setSortField', setSortField)
    //  提供修改品牌的id
    function setBrandId (newBrandId) {
      filterData.brandId = newBrandId
    }
    provide('setBrandId', setBrandId)

    // 提供修改商品属性 去重
    function setAttrs (newAttrs) {
      const index = filterData.attrs.findIndex(item => item.groupId === newAttrs.groupId)
      console.log(newAttrs)
      if (index > -1) {
        filterData.attrs.splice(index, 1)
      }
      filterData.attrs.push(newAttrs)
      filterData.attrs = newAttrs
    }
    provide('setAttrs', setAttrs)
  }
}
</script>

<style scoped lang='less'>
</style>
